<template>
    <j-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
        @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

        <a-spin :spinning="confirmLoading">
            <a-form :form="form">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商家编号" >
                    <a-select v-decorator="['partnerId', validatorRules.partnerId]" :getPopupContainer="node => node.parentNode" placeholder="请选择商家编号" allowClear>
                        <a-select-option v-for="(p_item, p_index) in partnerList"
                            :key="p_item.id.toString()" :value="p_item.id">
                            {{ p_item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="经销商编码" >
                    <a-select show-search v-decorator="['storeId', validatorRules.storeId]" placeholder="请输入经销商名称"
                        :default-active-first-option="false" :show-arrow="false" :filter-option="false"
                        :not-found-content="null" @search="handleSearch" @change="handleChange" allowClear >
                        <a-select-option v-for="d in storeList" :key="d.value" :title="d.label+d.value">
                            <span class="small">{{ d.label }}{{ d.value }}</span>
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="渠道编码" >
                    <a-select v-decorator="['channelId',  validatorRules.channelId]" :getPopupContainer="node => node.parentNode" placeholder="请选择渠道" allowClear>
                        <a-select-option v-for="(channel, channelIdIndex) in channelList"
                            :key="channel.id.toString()" :value="channel.channelId">
                            {{ channel.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="跟单员账号" >
                    <a-input placeholder="请输入跟单员账号" v-decorator="['userName',validatorRules.userName]" />
                    <!-- <a-select v-decorator="['userName', {}]" :getPopupContainer="node => node.parentNode" placeholder="请选择跟单员" allowClear>
                        <a-select-option v-for="s in merchandiserList" :key="s.value" :value="s.value">
                            {{ s.label }}
                        </a-select-option>
                    </a-select> -->
                </a-form-item>

            </a-form>
        </a-spin>
    </j-modal>
</template>

<script>
import { httpAction ,getAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"

export default {
    name: "SysStoreUserModal",
    data() {
        return {
            title: "操作",
            visible: false,
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },

            confirmLoading: false,
            form: this.$form.createForm(this),
            validatorRules:{
                partnerId: { rules: [{ required: true, message: '请选择商家编号!' }] },
                storeId: { rules: [{ required: true, message: '请选择经销商!' }] },
                channelId: { rules: [{ required: true, message: '请选择渠道!' }] },
                userName: { rules: [{ required: true, message: '请输入跟单员账号!' }] }
            },
            url: {
                add: "/system/sysStoreUser/add",
                edit: "/system/sysStoreUser/edit",
                channelListUrl: 'stm/stmChannelInfo/list',
                partnerList:'sys/sysPartner/list',
                getMerchandiserList:'sys/user/getDropDownList',
                getStoreList:'stm/stmStoreInfo/getDropDownList',
            },
            channelList:[],
            partnerList:[],
            storeList:[],
            merchandiserList:[],
        }
    },
    created() {
    },
    methods: {
        getChannelList() {
            getAction(this.url.channelListUrl, {
                status:1,
                pageSize:100
            }).then(res => {
                if (res.success) {
                    this.channelList = res.result.records;
                } else {
                    console.log(res.message)
                }
            })
        },
        getPartnerList() {
            getAction(this.url.partnerList, {
                status:1,
                pageSize:100
            }).then(res => {
                if (res.success) {
                    this.partnerList = res.result.records;
                } else {
                    console.log(res.message)
                }
            })
        },
        /***获取跟单员列表 */
        getMerchandiserList() {
            getAction(this.url.getMerchandiserList,{}).then(res => {
                if (res.success) {
                    this.merchandiserList = res.result;
                } else {
                    console.log(res.message)
                }
            })
        },
        // 经销商搜索
        handleSearch(value) {
            if(!value){
                return;
            }
            getAction(this.url.getStoreList, {storeName:value}).then(res => {
                if (res.success) {
                    this.storeList = res.result;
                } else {
                    console.log(res.message)
                }
            })
        },
        // 经销商搜索
        handleChange(value) {
            console.log(value);
        },

        add() {
            this.edit({});
        },
        edit(record) {
            if(!this.channelList.length){
                this.getChannelList();
                this.getPartnerList();
               // this.getMerchandiserList()
            }
            this.form.resetFields();
            this.model = Object.assign({}, record);
            record.storeName && this.handleSearch(record.storeName.slice(0,2))
            this.visible = true;
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(this.model, 'partnerId', 'storeId', 'channelId', 'userName'))
            });
        },
        close() {
            this.$emit('close');
            this.visible = false;
        },
        handleOk() {
            const that = this;
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true;
                    let httpurl = '';
                    let method = '';
                    if (!this.model.id) {
                        httpurl += this.url.add;
                        method = 'post';
                    } else {
                        httpurl += this.url.edit;
                        method = 'put';
                    }
                    let formData = Object.assign(this.model, values);
                    //时间格式化

                    console.log(formData)
                    httpAction(httpurl, formData, method).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                            that.$emit('ok');
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                        that.close();
                    })



                }
            })
        },
        handleCancel() {
            this.close()
        },


    }
}
</script>

<style lang="less" scoped></style>